<%@page import="org.apache.commons.lang3.StringUtils"%>
<%@page import="projectchumashgeniusproject.ProjectChumashGeniusProject.BookName"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Chumash Genius</title>
        <link type="text/css" href="CSS/Main.css" rel="stylesheet"/>
        <link type="text/css" href="Scripts/PowerTip/css/jquery.powertip-dark.min.css" rel="stylesheet"/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script src="Scripts/PowerTip/jquery.powertip.min.js" ></script>
        <script src="Scripts/ChumashText.js"></script>
        <script src="Scripts/spin.min.js"></script>
    </head>
    <body class="PageWrapper PageGradient">
        <h2 class="PageHeaderText">Chumash Genius Project</h2>
        <div id="UserFeatures" class="OrangeGradient">
            <h3 id="FeatureHeader">Features</h3>
            <ul>
                <li>
                    <label><strong>Navigate to </strong></label>
                    <select id="BookSelect">
                        <% 
                         for( BookName bookNameValue : BookName.values() ){ %>
                        <option value="<%= bookNameValue.name() %>">
                            <%= WordUtils.capitalizeFully(bookNameValue.toString()) %>
                        </option>
                        <% }%>
                    </select>
                    <label><strong>Chapter </strong></label>
                    <select id="ChapterSelect">                
                    </select>
                    <input type="button" id="GetChumashTextBtn" value="Go" />
                </li>
                <li><label for="ShoreshTooltipFeature">Shoresh Tooltip</label><input id="ShoreshTooltipFeature" type="checkbox" checked /></li>
                <li><label for="ShoreshHoverFeature">Same Shoresh Highlight</label><input id="ShoreshHoverFeature" type="checkbox" checked /></li>
            </ul>
        </div>
        <div class="OrangeGradient" id="ChumashTextContainer">
            <%@include file="ChumashText.jsp" %>
        </div>
        <div class="Footer"></div>
    </body>
</html>
